<template>
  <div style="display: flex">
    <div>
      <h1>新增商品</h1>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品名:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="name"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品价格:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="price"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品库存:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="goodsNum"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">生产日期:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="production"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">保质期:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="shelfLife"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">产地:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="producer"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品重量:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="weight"
          clearable
        >
        </el-input>
      </div>
     
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">是否打折:</p>
        <el-radio v-model="radio" label="1">打折</el-radio>
        <el-radio v-model="radio" label="2">不打折</el-radio>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品大种类:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="type"
          clearable
        >
        </el-input>
      </div>
      <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品小种类:</p>
        <el-input
          style="width: 300px"
          placeholder="请输入内容"
          v-model="kind"
          clearable
        >
        </el-input>
      </div>
       <div
        style="
          display: flex;
          width: 500px;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <p style="width: 100px">商品描述:</p>
        <el-input
         style="width: 300px"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="desc"
        >
        </el-input>
      </div>
      <el-button v-on:click="add" type="primary">新增</el-button>
    </div>
    <div class="pag">
      <p style="margin-right: 20px">商品图片:</p>
      <ShopGoodsAddImgs @getImg="getImg" />
    </div>
  </div>
</template>

<script>
import goodsApi from "../../api/shopGoods";
export default {
  data() {
    return {
      name: "",
      price: "",
      goodsNum: "",
      production: "",
      shelfLife: "",
      producer: "",
      weight: "",
      desc: "",
      type: "",
      kind: "",
      radio: "1",
      discount: false,
      imageUrl: "",
    };
  },
  methods: {
    getImg(imageUrl) {
      this.$data.imageUrl = imageUrl;
    },
    async add() {
      const goods = {
        name: this.$data.name,
        price: this.$data.price,
        goodsNum: this.$data.goodsNum,
        production: this.$data.production,
        shelfLife: this.$data.shelfLife,
        producer: this.$data.producer,
        weight: this.$data.weight,
        desc: this.$data.desc,
        type: this.$data.type,
        kind: this.$data.kind,
        discount: this.$data.radio === "1" ? true : false,
        images: this.$data.imageUrl,
      };
      await goodsApi.addGoods(goods);
      this.$message({
        duration: 1000,
        type: "success",
        message: "新增成功!",
      });
    },
  },
};
</script>

<style scoped>
.pag {
  display: flex;
  margin-top: 40px;
}
</style>